<template>
  <el-table height="100%" class="sa-table" :data="data" stripe>
    <template #empty>
      <sa-empty />
    </template>
    <el-table-column prop="user_id" label="ID" min-width="90" />
    <el-table-column label="分销商信息" min-width="150">
      <template #default="scope">
        <sa-user-profile :user="scope.row.user" :id="scope.row.user_id" />
      </template>
    </el-table-column>
    <el-table-column label="等级" min-width="120" align="center">
      <template #default="scope">
        <template v-if="scope.row.level_info">
          <div>{{ scope.row.level_info.name }}</div>
          <div>(等级{{ scope.row.level_info.level }})</div>
        </template>
        <template v-else>{{ scope.row.level }}</template>
      </template>
    </el-table-column>
    <el-table-column label="累计佣金" min-width="120" align="center">
      <template #default="scope"> {{ scope.row.total_income }}元 </template>
    </el-table-column>
    <el-table-column label="消费金额" min-width="120" align="center">
      <template #default="scope"> {{ scope.row.user?.total_consume || 0 }}元 </template>
    </el-table-column>
    <el-table-column label="自购分销业绩" min-width="120" align="center">
      <template #default="scope">
        <div>{{ scope.row.child_order_count_0 }}单</div>
        <div>{{ scope.row.child_order_money_0 }}元</div>
      </template>
    </el-table-column>
    <el-table-column label="上级分销商" min-width="120" align="center">
      <template #default="scope">
        <sa-user-profile
          type="agent"
          :user="scope.row.user?.parent_user"
          :id="scope.row.user?.parent_user_id"
          mode="col"
        />
      </template>
    </el-table-column>
    <el-table-column label="一级用户人数" min-width="120" align="center">
      <template #default="scope"> {{ scope.row.child_user_count_1 }}人 </template>
    </el-table-column>
    <el-table-column label="一级分销商人数" min-width="160" align="center">
      <template #default="scope">
        <div>{{ scope.row.child_agent_count_1 }}人</div>
      </template>
    </el-table-column>
    <el-table-column
      prop="create_time"
      label="创建时间"
      min-width="172"
      align="center"
    ></el-table-column>
    <el-table-column label="操作" min-width="140" fixed="right">
      <template #default="scope">
        <div class="sa-flex">
          <span
            class="sa-w-42 sa-flex sa-row-center sa-m-r-12"
            :style="{
              color: statusList[scope.row.status]?.color,
            }"
          >
            {{ scope.row.status_text }}
          </span>
          <el-button
            v-auth="'shop.admin.commission.agent.detail'"
            class="is-link"
            type="primary"
            @click="onDetail(scope.row.user_id)"
            >查看</el-button
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
  import { useHandle } from '../data';

  const props = defineProps(['data']);

  const { statusList, onDetail } = useHandle();
</script>
